layui.use(['jquery', 'form', 'layer', 'table'], function(){
    let $ = layui.jquery;
    let form = layui.form;
    let layer = layui.layer;
    let table = layui.table;

    // 工单表格列定义
    let cols = [
        [
            { 
                field: 'num',
                title: '工单编号',
                align: 'center'
            },
            { 
                field: 'types',
                title: '工单类型',
                align: 'center'
            },
            { 
                field: 'biaoti',
                title: '工单标题',
                align: 'center'
            },
            { 
                field: 'edata',
                title: '提交时间',
                align: 'center'
            },
            { 
                field: 'status',
                title: '状态',
                align: 'center',
                templet: function(d) {
                    var statusText = d.status || '待处理';
                    var statusClass = 'status-pending'; // Default class
                    var icon = 'layui-icon-question'; // Default icon
                   
                    return '<span class="' + statusClass + '">' + statusText + '</span>';
                }
            },
            {
				title: '操作',
				toolbar: '#toolDemo',
				align: 'center',
				width: 130
			}
        ]
    ];
    table.render({
		elem: '#workorderTable',
		url: './ajax/workgetDataList',
		page: true,
		cols: cols,
		cellMinWidth: 170,
		skin: 'line',
		toolbar: '#user-toolbar',
		defaultToolbar: [{
			title: '刷新',
			layEvent: 'refresh',
			icon: 'layui-icon-refresh',
		}, 'filter', 'print', 'exports']
	});
    

    // 监听工具栏事件
    table.on('toolbar(workorderTable)', function(obj){
        switch(obj.event){
            case 'refresh':
                table.reload('workorderTable');
                break;
        };
    });

    // 监听表格行工具事件
    table.on('tool(workorderTable)', function(obj) {
        var data = obj.data;
        if (obj.event === 'detail') {
            //layer.msg('查看ID：'+ data.id + ' 的工单详情');
             $.ajax({
                url: './ajax/workgetDetail',  // 替换为您的 API 端点,需要传递ID参数
                type: 'GET',
                dataType: 'json',
                data: {id: data.id},
                success: function(response) {
                    if (response.code === 200) {
                        var detail = response.data;
                        layer.open({
                            type: 1,
                            title: null, // Remove layui default title
                            area: ['550px', '450px'],
                            shadeClose: true,
                            skin: 'layui-layer-rim modalBg',
                            content: `
                                <div class="ticket-details-container">
                                     <h2 class="detailTitle">工单详情</h2> <!-- Add the title here -->
                                    <div class="detailItem">
                                        <span class="detailLabel"><i class="layui-icon layui-icon-list"></i> 工单编号:</span>
                                        <span class="detailValue">${detail.num || '无'}</span>
                                    </div>
                                    <div class="detailItem">
                                        <span class="detailLabel"><i class="layui-icon layui-icon-form"></i> 工单类型:</span>
                                        <span class="detailValue">${detail.types || '无'}</span>
                                    </div>
                                    <div class="detailItem">
                                        <span class="detailLabel"><i class="layui-icon layui-icon-template"></i> 工单标题:</span>
                                        <span class="detailValue">${detail.biaoti || '无'}</span>
                                    </div>
                                       <div class="detailItem">
                                        <span class="detailLabel"><i class="layui-icon layui-icon-question"></i> 工单状态:</span>
                                        <span class="detailValue">${detail.status || '无'}</span>
                                    </div>
                                    <div class="detailItem">
                                        <span class="detailLabel"><i class="layui-icon layui-icon-align-left"></i> 提交内容:</span>
                                        <span class="detailValue">${detail.text || '无'}</span>
                                    </div>
                                    <div class="detailItem">
                                        <span class="detailLabel"><i class="layui-icon layui-icon-date"></i> 提交时间:</span>
                                        <span class="detailValue">${detail.edata || '无'}</span>
                                    </div>
                                    ${detail.huifu ? `
                                    <div class="detailItem">
                                        <span class="detailLabel"><i class="layui-icon layui-icon-reply-fill"></i> 回复内容:</span>
                                        <span class="detailValue">${detail.huifu}</span>
                                    </div>` : ''}
                                    ${detail.wdata ? `
                                    <div class="detailItem">
                                        <span class="detailLabel"><i class="layui-icon layui-icon-log"></i> 处理时间:</span>
                                        <span class="detailValue">${detail.wdata}</span>
                                    </div>` : ''}
                                </div>
                            `,
                          /* Style adjustments for the modal title */
                             success: function(layero, index) {
                                layero.css('box-shadow', '0 4px 12px rgba(0,0,0,.15)');
                                   $(layero).css({
                                    'top': '50%',
                                    'left': '50%',
                                    'transform': 'translate(-50%, -50%)',
                                    'background': 'none' // Remove default background
                                });
                              layero.find('.layui-layer-title').remove();  // 重点代码：移除默认标题栏 

                                layero.find('.layui-layer-content').css({
                                    'background': 'none', // Remove default background
                                    'padding': '0'
                                });
                            }
                            
                        });
                  
                    } else {
                        layer.msg('获取工单详情失败: ' + response.msg, {icon: 2});
                    }
                },
                error: function(xhr, status, error) {
                    layer.msg('服务器错误', {icon: 2});
                }
            });
        } 
    });

    //监听提交
    form.on('submit(submitTicket)', function(data){
        $.ajax({
            url: './ajax/submitTicket',  // 替换为您的 API 端点
            type: 'POST',
            dataType: 'json',
            data: data.field,
            success: function(response) {
                if (response.code === 200) {
                    layer.msg('工单提交成功!', {icon: 1},function(){
                        window.location.reload();
                    });

                } else {
                    layer.msg('工单提交失败: ' + response.msg, {icon: 2});
                }
            },
            error: function(xhr, status, error) {
                layer.msg('服务器错误', {icon: 2});
            }
        });
        return false;
    });
});